/<template>
  <div class="content-outer">
    <Block class="content-head">
      <div class="search-form">
        <div class="search-item">
          <div class="item-label">名称</div>
          <div class="item-content">
            <el-input
              v-model="formData.name"
              clearable
              placeholder="请输入内容方名称"
            ></el-input>
          </div>
        </div>
        <div class="search-item">
          <el-button
            :loading="loading"
            style="margin-left: 10px"
            type="primary"
            @click="onSubmit"
          >查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button
            v-permission:cooperate-index-add
            type="primary"
            @click="add('新增')"
          >新建</el-button>
        </div>
      </div>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:account="{row}">
            <el-button
              type="text"
              size="medium"
              @click="onlogin(row)"
            >{{ row.account }}</el-button>
          </template>
          <template v-slot:type="{row}">
            <div class="rowFlex">
              <el-tag
                v-for="(item,index) in row.type"
                :key="index"
                type="success"
                style="margin:5px;"
              >
                {{ item == 2 ? '制作方' : item == 3 ? '版权方' : '编剧方' }}
              </el-tag>
            </div>
          </template>
          <template v-slot:zip="{row}">
            <el-button
              type="text"
              size="medium"
              @click="add('编辑',row)"
            >编辑</el-button>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="AddContentVue"
      drawer-size="400px"
      @ok="onSuccess"
    ></BiDrawer>
  </div>
</template>

<script>
import { partnerList, getTokenById } from '@/api/cooperate'
import AddContentVue from '../components/AddContent.vue'
export default {
  data() {
    return {
      AddContentVue,
      isSetRemarkId: '',
      loading: false,
      formData: {
        type: '5',
        name: ''
      },
      tableData: [],
      tableColums: [
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '简称',
          prop: 'short_name'
        },
        {
          label: '登录账号',
          prop: 'account',
          slotScope: true
        },
        {
          label: '角色',
          prop: 'type',
          slotScope: true
        },
        {
          label: '创建人',
          width: 100,
          prop: 'operator'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          prop: 'zip',
          width: 80,
          slotScope: true
        }
      ],
      drawer: {
        id: '',
        visible: false,
        row: {}
      },
      page_info: {
        page: 1,
        page_size: 20
      }
    }
  },
  mounted() {
    this.onGetList()
  },
  methods: {
    async onGetList() {
      this.loading = true
      const res = await partnerList({
        ...this.formData,
        ...this.page_info
      })
      if (res.status_code == 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
      this.loading = false
    },
    async onlogin(row) {
      const res = await getTokenById({ id: row.id, type: 2 })
      if (res.status_code == 1) {
        const zmiao = import.meta.env.MODE === 'production' ? 'https://zyucontent.wozhangwan.com/#/sso' : 'https://zyucontent.zwwlkj03.top/#/sso'
        const url = zmiao + `?distributor_name=${res.data.data.partner_name}&token=${res.data.data.token}&username=${res.data.data.username}`
        const a = document.createElement('a')
        a.target = '_blank'
        a.href = url
        a.click()
      }
    },
    onSubmit() {
      this.page_info.page = 1
      this.onGetList()
    },
    handleReset() {
      this.formData = {
        name: '',
        type: '5'
      }
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.onGetList()
    },
    onSuccess() {
      this.onGetList()
    },
    add(type, row) {
      this.drawer = {
        visible: true,
        title: type,
        row: type == '新增' ? {} : row
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.status-drop-box {
  .edit-icon {
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    color: #06c021;
    margin-left: 5px;
  }
}
.content-outer {
  padding-top: 10px !important;
}
.tag-mark {
  transform: scale(120%);
}
.el-table--enable-row-hover .el-table__body tr:hover > td .status-drop-box .edit-icon {
  opacity: 1;
}
.hover-row .edit-icon {
  opacity: 1;
}
.set_remark:hover {
  color: #06c021;
  cursor: pointer;
}
.remark {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}
</style>